<template>
  <div class="paper-home-container">
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <h1 class="main-title">黄宇欣</h1>
      <div class="subtitle">大数据论文管理系统</div>
    </div>

    <!-- 用户个人信息区域 -->
    <el-card class="user-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-user"></i> 用户个人信息</span>
      </div>
      <div class="user-info-content">
        <div class="user-avatar">
          <el-avatar :size="80" :src="userInfo.avatar"></el-avatar>
        </div>
        <div class="user-details">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">学号/工号：</span>
            <span class="value">{{ userInfo.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">院系/部门：</span>
            <span class="value">{{ userInfo.department }}</span>
          </div>
          <div class="info-item">
            <span class="label">专业/职位：</span>
            <span class="value">{{ userInfo.major }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ userInfo.contact }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 论文信息区域 -->
    <el-card class="paper-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-document"></i> 论文信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAddPaper">添加论文</el-button>
      </div>
      <el-table :data="paperList" style="width: 100%" stripe>
        <el-table-column prop="title" label="论文标题" min-width="200"></el-table-column>
        <el-table-column prop="authors" label="作者" width="150"></el-table-column>
        <el-table-column prop="journal" label="期刊/会议" width="180"></el-table-column>
        <el-table-column prop="publishDate" label="发表日期" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleViewPaper(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="handleEditPaper(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 论文结论区域 -->
    <el-card class="paper-conclusion-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-edit-outline"></i> 论文结论</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleEditConclusion">编辑</el-button>
      </div>
      <div class="conclusion-content">
        <p v-for="(paragraph, index) in conclusion" :key="index" class="conclusion-paragraph">
          {{ paragraph }}
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PaperHomeHuang',
  data() {
    return {
      // 用户信息
      userInfo: {
        name: '黄宇欣',
        id: '116420220090',
        department: '工程技术学院',
        major: '大数据技术与应用',
        contact: '2109645422@qq.com',
        avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.XS6EtBzAmWWa31cfFvcx6QHaHa?rs=1&pid=ImgDetMain&o=7&rm=3'
      },
      // 论文列表
      paperList: [
        {
          id: 1,
          title: '基于深度学习的大数据分析方法研究',
          authors: '黄宇欣, 吴淑敏',
          journal: '计算机学报',
          publishDate: '2023-05-15',
          status: '已发表'
        },
        {
          id: 2,
          title: '大数据环境下的分布式计算框架优化',
          authors: '黄宇欣',
          journal: '计算机研究与发展',
          publishDate: '2023-09-10',
          status: '已发表'
        },
        {
          id: 3,
          title: '面向大数据的实时处理技术研究',
          authors: '黄宇欣, 王鑫',
          journal: '大数据',
          publishDate: '2024-02-05',
          status: '审稿中'
        }
      ],
      // 论文结论
      conclusion: [
        '本研究针对大数据处理中的性能优化问题，提出了一种基于分布式计算框架的改进方案。通过深入分析现有框架的性能瓶颈，我们设计了一种新的任务调度算法，能够根据数据特征和集群状态动态调整资源分配。',
        '实验结果表明，与传统方法相比，我们的方案在处理大规模数据集时，计算效率提高了40%，资源利用率提升了35%。这一成果对于解决大数据处理中的实时性和可扩展性问题具有重要意义。',
        '此外，我们还研究了大数据环境下的数据质量保障机制，提出了一种基于机器学习的异常检测方法，能够有效识别和处理数据中的异常值和噪声，提高数据分析结果的准确性。'
      ]
    }
  },
  methods: {
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        '已发表': 'success',
        '审稿中': 'warning',
        '已退稿': 'danger',
        '待提交': 'info'
      }
      return statusMap[status] || 'info'
    },
    // 添加论文
    handleAddPaper() {
      this.$message({
        message: '添加论文功能开发中...',
        type: 'info'
      })
    },
    // 查看论文
    handleViewPaper(row) {
      this.$message({
        message: `查看论文: ${row.title}`,
        type: 'info'
      })
    },
    // 编辑论文
    handleEditPaper(row) {
      this.$message({
        message: `编辑论文: ${row.title}`,
        type: 'info'
      })
    },
    // 编辑结论
    handleEditConclusion() {
      this.$message({
        message: '编辑结论功能开发中...',
        type: 'info'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-home-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.header-section {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
    background: linear-gradient(135deg, #56b5ff, #56b5ff);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    .main-title {
    font-size: 32px;
    margin: 0;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .subtitle {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.9;
  }
}

.user-info-card,
.paper-info-card,
.paper-conclusion-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 16px;
}

.user-info-content {
  display: flex;
  align-items: center;
  padding: 10px 0;

  .user-avatar {
    margin-right: 20px;
  }

  .user-details {
    flex: 1;

    .info-item {
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .label {
        width: 100px;
        color: #606266;
        font-weight: 500;
      }

      .value {
        color: #303133;
        font-weight: 500;
      }
    }
  }
}

.conclusion-content {
  line-height: 1.8;
  color: #303133;

  .conclusion-paragraph {
    margin-bottom: 15px;
    text-indent: 2em;
  }
}
</style>